<template>
  <PageWrapper title="上传组件示例">
    <Alert message="基础示例" />
    <BasicUpload
      :maxSize="20"
      :maxNumber="10"
      @change="handleChange"
      :api="uploadApi"
      class="my-5"
      :accept="['image/*']"
    />

    <Alert message="嵌入表单,加入表单校验" />

    <BasicForm @register="registerValiate" class="my-5" />

    <Alert message="嵌入表单,加入resultFiled自定义返回值" />
    <BasicForm @register="registerCustom" class="my-5" />

    <Alert message="嵌入表单,自定义预览内容" />
    <BasicForm @register="registerPreview" class="my-5" />
  </PageWrapper>
</template>
<script lang="ts" setup>
import { BasicUpload } from "@/components/Upload";
import { useMessage } from "@/hooks/web/useMessage";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { PageWrapper } from "@/components/Page";
import { Alert, Button } from "ant-design-vue";
import { uploadApi } from "@/api/sys/upload";
import { createVNode } from "vue";

const schemasValiate: FormSchema[] = [
  {
    field: "field1",
    component: "Upload",
    label: "字段1",
    rules: [{ required: true, message: "请选择上传文件" }],
    componentProps: {
      api: uploadApi,
    },
  },
  {
    field: "field2",
    component: "ImageUpload",
    label: "字段2(ImageUpload)",
    colProps: {
      span: 8,
    },
    componentProps: {
      api: uploadApi,
    },
  },
];
const schemasCustom: FormSchema[] = [
  {
    field: "field3",
    component: "Upload",
    label: "字段3",
    componentProps: {
      resultField: "data3.url",
      api: (file, progress) => {
        return new Promise((resolve) => {
          uploadApi(file, progress).then((uploadApiResponse) => {
            resolve({
              code: 200,
              data3: {
                url: uploadApiResponse.data.url,
              },
            });
          });
        });
      },
    },
  },
  {
    field: "field4",
    component: "ImageUpload",
    label: "字段4(ImageUpload)",
    colProps: {
      span: 8,
    },
    componentProps: {
      resultField: "data4.url",
      api: (file, progress) => {
        return new Promise((resolve) => {
          uploadApi(file, progress).then((uploadApiResponse) => {
            resolve({
              code: 200,
              data4: {
                url: uploadApiResponse.data.url,
              },
            });
          });
        });
      },
    },
  },
];
const schemasPreview: FormSchema[] = [
  {
    field: "field5",
    component: "Upload",
    label: "字段5",
    componentProps: {
      previewColumns: [
        {
          title: "url5",
          dataIndex: "url5",
        },
        {
          title: "type5",
          dataIndex: "type5",
        },
        {
          title: "name5",
          dataIndex: "name5",
        },
        {
          title: "operation",
          dataIndex: "",
          customRender: ({ record }) => {
            return createVNode(
              Button,
              {
                onclick: () => {
                  console.log(record);
                  createMessage.success(`请到控制台查看该行输出结果`);
                },
              },
              "点我",
            );
          },
        },
      ],
      beforePreviewData: (arg) => {
        let data = arg
          .filter((item) => !!item)
          .map((item) => {
            if (typeof item !== "string") {
              console.error("return value should be string");
              return;
            }
            return {
              url5: item,
              type5: item.split(".").pop() || "",
              name5: item.split("/").pop() || "",
            };
          });
        return data;
      },
      resultField: "data5.url",
      api: (file, progress) => {
        return new Promise((resolve) => {
          uploadApi(file, progress).then((uploadApiResponse) => {
            resolve({
              code: 200,
              data5: {
                url: uploadApiResponse.data.url,
              },
            });
          });
        });
      },
    },
  },
];

const { createMessage } = useMessage();

function handleChange(list: string[]) {
  createMessage.success(`已上传文件${JSON.stringify(list)}`);
}
const [registerValiate, { getFieldsValue: getFieldsValueValiate, validate }] =
  useForm({
    labelWidth: 160,
    schemas: schemasValiate,
    actionColOptions: {
      span: 18,
    },
    submitFunc: () => {
      return new Promise((resolve) => {
        validate()
          .then((e) => {
            resolve();
            console.log(getFieldsValueValiate());
            createMessage.success(`请到控制台查看结果`);
          })
          .catch(() => {
            createMessage.error(`请输入必填项`);
          });
      });
    },
  });

// resultFields 字段示例
const [registerCustom, { getFieldsValue: getFieldsValueCustom }] = useForm({
  labelWidth: 160,
  schemas: schemasCustom,
  actionColOptions: {
    span: 18,
  },
  submitFunc: () => {
    return new Promise((resolve) => {
      console.log(getFieldsValueCustom());
      resolve();
      createMessage.success(`请到控制台查看结果`);
    });
  },
});

// registerPreview
const [registerPreview, { getFieldsValue: getFieldsValuePreview }] = useForm({
  labelWidth: 160,
  schemas: schemasPreview,
  actionColOptions: {
    span: 18,
  },
  submitFunc: () => {
    return new Promise((resolve) => {
      console.log(getFieldsValuePreview());
      resolve();
      createMessage.success(`请到控制台查看结果`);
    });
  },
});
</script>
